<template>
	
	 <el-dialog v-model="dialogVisible"
	  :title="dialogTitle"
	   :before-close="closeDialog"
		class="elDiaLog"
		lock-scroll width="1000px" 
		:close-on-click-modal="false" 
		:close-on-press-escape="false">
		<div class="form-box list-info" v-loading="loading2" v-if="['act_audit'].includes(dialogStatus) && detailInfo">
		
			<el-form ref="dataFormRef" :model="formData"  label-width="150px">
				<el-form-item  label="业务名称:" >
					<span>{{formData.audit[0].name}}</span>
				</el-form-item>	
				<el-form-item  label="申请人:" >
					<span style="margin-right: 8px;">{{formData.audit[0].user.name}}</span> 
					<el-tag type="primary">{{formData.add_time_text}}</el-tag> 
				</el-form-item>	
				<el-form-item  label="工程名称:" >
					<span>{{formData.audit[0].engine.name}}</span>
				</el-form-item>	
				<el-form-item  label="所属部门:" >
					<span>{{formData.audit[0].department.name}}</span>
				</el-form-item>	
				<el-form-item  label="申请内容:" >
					<span>{{formData.audit[0].content}}</span>
				</el-form-item>	
				<el-form-item  label="附件:" >
					<div v-if="formData.audit[0].files?.length >0" v-for="(ite,ind) in formData.audit[0].files" >
						<el-link @click="onFilePreview(ite)" type="primary">{{ind + 1}}.{{ite.name}}</el-link>
					</div> 
					 <el-link v-else type="info">无</el-link>
				</el-form-item>	
				<el-form-item  label="处理结果" >
					<el-input
					   v-model="formData.mark"
					   :rows="6"
					   type="textarea"
					   placeholder="请输入处理结果"
					 />
				</el-form-item>	
			</el-form>
		</div>
		<div class="form-box list-info" v-loading="loading2" v-if="['act_info'].includes(dialogStatus) && detailInfo">
		
			 <el-descriptions size="default" :column="1" border>
				<el-descriptions-item label-class-name="labelC1"
					label="业务名称：">{{detailInfo.audit[0].name}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="申请人:" >
					{{detailInfo.audit[0].user.name}} <el-tag type="primary">{{detailInfo.add_time_text}}</el-tag> 
				</el-descriptions-item>	
				<el-descriptions-item label-class-name="labelC1"
					label="工程名称：">{{detailInfo.audit[0].engine.name}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="所属部门：">{{detailInfo.audit[0].department.name}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="申请内容：">{{detailInfo.audit[0].content}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1" label="附件：">
					<div v-if="detailInfo.audit[0].files?.length >0" v-for="(ite,ind) in detailInfo.audit[0].files" >
						<el-link @click="onFilePreview(ite)" type="primary">{{ind + 1}}.{{ite.name}}</el-link>
					</div> 
					 <el-text v-else type="info">无</el-text>
				</el-descriptions-item>
			
			
				<el-descriptions-item label-class-name="labelC1"
					label="处理人：">
					{{userStore.name}} <el-tag type="primary">{{detailInfo.check_time_text}}</el-tag> 
					</el-descriptions-item>
					
				<el-descriptions-item label-class-name="labelC1"
					label="处理结果：">
					<el-tag  :type="titModel[detailInfo.status].type">{{titModel[detailInfo.status].title}}</el-tag>
					{{detailInfo.mark}}
					</el-descriptions-item>
				
		
			</el-descriptions>
			<el-divider content-position="left">审核日志</el-divider>
			<el-row>
				<el-table border  :data="detailInfo.log" style="width: 100%">
				  <el-table-column label="操作日期" width="220">
				    <template #default="scope">
						<el-icon> <el-icon-timer></el-icon-timer></el-icon>
						<span style="margin-left: 10px">{{ scope.row.check_time_text }}</span>
				    </template>
				  </el-table-column>
				  <el-table-column label="操作人" width="200">
				    <template #default="scope">
				      <i class="el-icon-user" />
				      {{ scope.row.user.name }}
				    </template>
				  </el-table-column>
				  <el-table-column label="审核状态" align="center" width="150">
				    <template #default="scope">
						<el-tag  :type="titModel[scope.row.status].type">{{titModel[scope.row.status].title}}</el-tag>
				    </template>
				  </el-table-column>
				  <el-table-column label="备注">
				    <template #default="scope">
				      {{ scope.row.mark }}
				    </template>
				  </el-table-column>
				</el-table>
			</el-row>
			
		</div>
		
		
		
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" v-if="['act_audit'].includes(dialogStatus)"  :loading="loading3" @click="doData('act_doend')">通 过</el-button>
				<el-button type="primary" v-if="['act_audit'].includes(dialogStatus)" :loading="loading3" @click="doData('act_doback')">退 回</el-button>
				<el-button :disabled="loading3" @click="closeDialog">关 闭</el-button>
			</div>
		</template>
		
	
		
	</el-dialog>
	
	
</template>
<script setup lang="ts">
	import { useRoute } from 'vue-router';
	import _ from 'lodash-es'
	import { feilType,onFilePreview } from "@/utils/funcall"
	import { useBaseConfigStore } from "@/store/modules/baseConfig";
	import { useUserStore } from "@/store/modules/user";
	import {BUSINESS_TYPE} from "@/utils/constant";
	const baseConfigStore = useBaseConfigStore();
	const userStore =useUserStore();
	
	
	

	// 获取接口地址
	import {
		pushAuditCheck
	} from "@/api/aggravate";
	const titModel=ref([{
	    title:'待审核',
	    type:'info'
	  },{
	    title:'已通过',
	    type:'success'
	  },{
	    title:'已驳回',
	    type:'danger'
	  }])
	const props = defineProps({
		//数据列表索引值  例如 user ->对应着 vuex  == user_cxxxxx模块
	    dialogTitle: {
	        type: String,
	        default:"添加信息"
	    },
		dialogStatus: {
			type: String,
			default: "add_art"
		},
		dialogTableValue:{
		  type:Object,
		  default: ()=>{},
		}
	});

	const emit = defineEmits(['update:modelValue','initRefreshList']);
	const dialogVisible = ref(false);
	const loading3 = ref(false);//新增或者修改加载load按钮
	const loading2 = ref(false)
	// 数据的data-ref
	const dataFormRef = ref(ElForm);
	const formData = ref<any>({
		id:undefined,
		mark:"",
		status:""
	})
	const detailInfo = ref<any>({});
	watch(
		()=>props.dialogTableValue,
		()=>{
			if (props.dialogStatus == "act_audit") {
				console.log('工单审核')
				formData.value =  _.cloneDeep(props.dialogTableValue);
				// detailInfo.value =  _.cloneDeep(props.dialogTableValue);
				// getDetailInfo(props.dialogTableValue)
			}
			else if (props.dialogStatus == "act_info" )
			{
				 detailInfo.value =  _.cloneDeep(props.dialogTableValue);
			}
	},{deep:true,immediate:true})
	// 关闭弹窗
	function closeDialog() {
		 if (!loading3.value) {
			emit('update:modelValue',false)
		 }
	}
	
	// 处理结果
	function doData(act:string){
		let dostatus = 0;
		switch (act) {
		  case 'act_doend':
			dostatus= 1
		    break
		  case 'act_doback':
			dostatus= 2
		    break
		  default:
			ElMessage.error('无效操作')
		}
		if (['act_doend', 'act_doback'].includes(act)){
			// 退回
			var data = {
				mark:formData.value.mark,
				status:dostatus,
				id:formData.value.id
			}
			loading3.value = true
			pushAuditCheck(data).then((res) => {
				loading3.value = false;
				ElMessage({ message:res.msg, type: 'success' })
				closeDialog();
				emit('initRefreshList')
			}).finally(() => {
				loading3.value = false;
			})
		}
		
		
	}
	
	onMounted(() => {
		
	});
</script>


<style lang="scss">
	.labelC1 {
		width: 180px;
		text-align: right !important;
	}
</style>